<template>
  <view class="content">
    <!--	<view class="tab-box" >
        <u-tabs :list="tabList" @click="tabChange" :scrollable="false" lineColor="#4871C0" :current="activeIndex"
          lineWidth="70rpx" lineHeight="5rpx" :activeStyle="{
            color: '#4871C0',
            fontWeight: 'bold',
          fontSize:'28rpx',
        }" :inactiveStyle="{
            color: '#999999',
          fontSize:'28rpx',
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:30%;padding-bottom:10rpx;"></u-tabs>
      </view>
      -->
    <!-- 全部人员列表 -->
    <view class="list-all" v-if="activeIndex == 0">
      <!--			<view class="list-all-item" v-for="(item,index) in list" :key="index">-->
      <!--				<view class="image-box">-->
      <!--					<u&#45;&#45;image :src="item.avatar" width="88rpx" height="88rpx"-->
      <!--						radius="8rpx">-->
      <!--					</u&#45;&#45;image>-->
      <!--				</view>-->
      <!--				<text>{{item.nickname}}</text>-->
      <!--			</view>-->

      <u-swipe-action style="width: 100%;">
        <u-swipe-action-item :options="options1" v-for="(item,index) in list" :key="index" @click="clickItem($event,item)">
          <view class="swipe-action u-border-top u-border-bottom">
            <view class="swipe-action__content">
              <view class="item u-flex">
                <view class="item-image">
                  <u--image :src="item.avatar" width="88rpx"
                            height="88rpx" radius="8rpx">
                  </u--image>
                </view>
                <view class="item-info" >
                  <view class="item-name">
                    {{item.nickname}}
                  </view>
                  <!--                  <view class="item-time">-->
                  <!--                    <text v-if="item.is_late == 1" class="late">迟到签到</text>-->
                  <!--                    <text v-if="item.is_late == 0">签到成功</text>I {{item.createtime}}-->
                  <!--                  </view>-->
                </view>
              </view>
            </view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>
    <!-- 签到列表 -->
    <view class="list" v-if="activeIndex == 1">
      <u-swipe-action>
        <u-swipe-action-item :options="options" v-for="(item,index) in list" :key="index"@click="clickItem($event,item)">
          <view class="swipe-action u-border-top u-border-bottom">
            <view class="swipe-action__content">
              <view class="item u-flex">
                <view class="item-image">
                  <u--image :src="item.avatar" width="88rpx"
                            height="88rpx" radius="8rpx">
                  </u--image>
                </view>
                <view class="item-info" >
                  <view class="item-name">
                    {{item.nickname}}
                  </view>
                  <view class="item-time">
                    <text v-if="item.is_late == 1" class="late">迟到签到</text>
                    <text v-if="item.is_late == 0">签到成功</text>I {{item.createtime}}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>
    <!-- 请假列表 -->
    <view class="list" v-if="activeIndex == 2">
      <u-swipe-action>
        <u-swipe-action-item :options="options1" v-for="(item,index) in list" :key="index" @click="clickItem($event,item)">
          <view class="swipe-action u-border-top u-border-bottom">
            <view class="swipe-action__content">
              <view class="item u-flex">
                <view class="item-image">
                  <u--image :src="item.avatar" width="88rpx"
                            height="88rpx" radius="8rpx">
                  </u--image>
                </view>
                <view class="item-info" >
                  <view class="item-name">
                    {{item.nickname}}
                  </view>
                  <view class="item-time" >
                    {{item.title}}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </u-swipe-action-item>

      </u-swipe-action>
    </view>
    <!-- 缺勤列表 -->
    <view class="list" v-if="activeIndex == 3">
      <u-swipe-action>
        <u-swipe-action-item :options="options2" v-for="(item,index) in list" :key="index"  @click="clickItem($event,item)">
          <view class="swipe-action u-border-top u-border-bottom">
            <view class="swipe-action__content">
              <view class="item u-flex">
                <view class="item-image">
                  <u--image :src="item.avatar" width="88rpx"
                            height="88rpx" radius="8rpx">
                  </u--image>
                </view>
                <view class="item-info" >
                  <view class="item-name">
                    {{item.nickname}}
                  </view>
                  <view class="item-time">
                    {{item.title}}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </u-swipe-action-item>

      </u-swipe-action>
    </view>
  </view>
</template>

<script>
import {
  getmeetProple
} from '@/api/meetApi.js'
import {singEdit} from "../../../api/meetApi";
export default {
  data() {
    return {
      tabList: [{
        name: '全部',
      }, {
        name: '签到',
      }, {
        name: '请假'
      },
        {
          name: '缺勤'
        }
      ],
      list:[],
      activeIndex: 0,
      options: [{
        text: '设为缺勤 ',
        style: {
          backgroundColor: '#EBF1FD',
          width: '162rpx',
          color: '#4871C0',
          fontSize: "28rpx"
        }
      }, {
        text: '设为请假 ',
        style: {
          backgroundColor: '#4871C0',
          width: '162rpx',
          color: '#fff',
          fontSize: "28rpx"
        }
      }],
      options1: [{
        text: '设为缺勤 ',
        style: {
          backgroundColor: '#EBF1FD',
          width: '142rpx',
          color: '#4871C0',
          fontSize: "28rpx"
        }
      }, {
        text: '设为已签到 ',
        style: {
          backgroundColor: '#4871C0',
          width: '182rpx',
          color: '#fff',
          fontSize: "28rpx"
        }
      }],
      options2: [{
        text: '设为请假 ',
        style: {
          backgroundColor: '#EBF1FD',
          width: '142rpx',
          color: '#4871C0',
          fontSize: "28rpx",
        }
      }, {
        text: '设为已签到 ',
        style: {
          backgroundColor: '#4871C0',
          width: '182rpx',
          color: '#fff',
          fontSize: "28rpx"
        }
      }],
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getData();
  },

  methods: {
    clickItem(e,item){
      console.log("-----------3",e)
      console.log("-----------item",item)
      let params = {
        meet_id:this.id,
        user_id:item.id,
      }
      if(String(this.activeIndex) == '0'){
        if(String(e.index) == '0'){
          params.status='3'
        }
        if(String(e.index) == '1'){
          params.status='1'
        }
      }
      if(String(this.activeIndex) == '1'){
        if(String(e.index) == '0'){
          params.status='3'
        }
        if(String(e.index) == '1'){
          params.status='4'
        }
      }
      if(String(this.activeIndex) == '2'){
        if(String(e.index) == '0'){
          params.status='3'
        }
        if(String(e.index) == '1'){
          params.status='1'
        }
      }
      if(String(this.activeIndex) == '3'){
        if(String(e.index) == '0'){
          params.status='4'
        }
        if(String(e.index) == '1'){
          params.status='1'
        }
      }
      singEdit(params).then(res => {
        this.isLoading = false;
        uni.stopPullDownRefresh();
        console.log(res)
        //this.list = res.data.data;
        uni.showToast({
          icon:"none",
          title:res.msg
        })
      })
    },
    tabChange(item) {
      console.log('item', item);
      this.activeIndex = item.index;
      this.list = [];
      this.getData()
    },
    getData() {
      this.isLoading = true;
      let params = {
        meet_id: this.id,
        limit:20,
        page:1,
        status:this.activeIndex
      };
      this.list =  uni.getStorageSync('meet_people_list');
      /*
      getmeetProple(params).then(res => {
        this.isLoading = false;
        uni.stopPullDownRefresh();
        console.log(res)
        this.list = res.data.data;
      })
      */
    },
  },
};
</script>

<style>
.content {
  background-color: #F8F8F8;
  min-height: 100vh;
}

.u-flex {
  display: flex;
}

.tab-box {
  padding: 20rpx 0;
  background-color: #fff;
  border-bottom: 6rpx solid #F8F8F8;
}

.list-all {
  display: flex;
  flex-wrap: wrap;
}

.list-all-item {
  width: 20%;
  text-align: center;
  padding-top: 40rpx;
}

.image-box {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.list-all-item text {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #666666;
  margin-top: 24rpx;
}

.swipe-action {
&__content {
   padding: 25rpx 0;

&__text {
   font-size: 15px;
   color: $u-main-color;
   padding-left: 30rpx;
 }
}
}

.item {
  padding: 30rpx;
  border-bottom: 2px solid #F3F3F3;
}

.item-info {
  margin-left: 20rpx;
}

.item-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
}

.item-time {
  font-size: 24rpx;
  font-weight: 500;
  color: #666666;
  margin-top: 10rpx;
}
.item-time text{
  margin-right: 10rpx;
}
.late{
  color: #FF7A00;
}
</style>
